//  导入react
import React, {Component} from 'react';
// 导入react native
import {View, Text, StyleSheet, Button, TextInput, Image, Dimensions, TouchableOpacity} from 'react-native';
import {Set_Token,LoginAction} from "../../store/actions/user"
import {connect} from 'react-redux'
import {getToken, setToken, removeToken} from "../../utils/Auth";

import {Toast} from "../../utils/Toast";
//计算屏幕的宽度
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

class Login extends Component {
    constructor() {
        super();
        this.state = {
            username: "admin",
            password: "admin",
        }
    }

    /**
     * @Description:登陆方法
     * @author TangYong
     * @date 2022/5/3
     */
    submitLogin = () => {
        let reg=/^[1][3,4,5,7,8][0-9]{9}$/;    //11位手机号码正则

        if ( !this.state.username){
            Toast.showWarning("请输入账号")
            return
        }
        else if(!reg.test(this.state.username)&&this.state.username!='admin'){
            Toast.showWarning("请输入正确的账号")
            return
        }
        else if (!this.state.password){
            Toast.showWarning("请输入密码")
            return
        }

      let user={
            mobile:this.state.username,
            password:this.state.password
      }
        // let  user={
        //     username:"202108210649",
        //     password:"Ty909136"
        // }

        this.props.loginChange(user);
    }
    // removeToken = () => {
    //     removeToken();
    //     //console.log(res);
    // }
    // setToken = () => {
    //     setToken();
    //     //console.log(res);
    // }
    // getToken = () => {
    //     getToken().then(res => {
    //         console.log(res, "getToken()");
    //     }).catch(error => {
    //         console.log(error)
    //     });
    //
    // }
    //用户名改变时
    onChangeTextUsername = (text) => {
        this.setState({
            username: text
        })
    }
    //密码改变时
    onChangeTextPwd = (text) => {
        this.setState({
            password: text
        })
    }

    render() {
        return (
            <View style={style.container}>


                <View style={style.conTop}>
                    <View style={style.top}>
                        <Image style={{height: 50, width: 50}}
                               source={require('../../../src/img/loading.png')}
                        />
                    </View>
                    <View style={style.center}>
                        <View style={style.cen_container}>
                            <TextInput
                                style={{
                                    width: 200,
                                    textAlign: "center",
                                    borderColor: 'transparent',
                                    borderWidth: 1,
                                    padding: 0,
                                    fontSize: 18
                                }}

                                maxLength={12}
                                placeholder="请输入学号"
                                onChangeText={text => this.onChangeTextUsername(text)}
                                value={this.state.username}
                            />
                        </View>
                        <View style={style.cen_container}>
                            <TextInput
                                style={{
                                    width: 200,
                                    textAlign: "center",
                                    borderColor: 'transparent',
                                    borderWidth: 1,
                                    padding: 0,
                                    fontSize: 18
                                }}
                                placeholder="请输入密码"
                                secureTextEntry={true}
                                onChangeText={text => this.onChangeTextPwd(text)}
                                value={this.state.password}
                            />
                        </View>
                    </View>
                    <View style={style.btn}>
                        <TouchableOpacity
                            style={style.button}
                            onPress={this.submitLogin}
                        >
                            <Text style={{color: "#FEFEFE"}}>登 陆</Text>
                        </TouchableOpacity>
                    </View>
                    {/*<View>*/}
                    {/*    <Button onPress={*/}
                    {/*        this.submitLogin*/}
                    {/*    }*/}
                    {/*            title="login"*/}
                    {/*    >*/}
                    {/*    </Button>*/}

                        {/*<Button onPress={*/}
                        {/*    this.setToken*/}
                        {/*}*/}
                        {/*        title="setToken"*/}
                        {/*>*/}
                        {/*</Button>*/}
                    {/*    <Button onPress={*/}
                    {/*        this.getToken*/}
                    {/*    }*/}
                    {/*            title="getToken"*/}
                    {/*    >*/}
                    {/*    </Button>*/}
                    {/*    <Button onPress={*/}
                    {/*        this.removeToken*/}
                    {/*    }*/}
                    {/*            title="removeToken"*/}
                    {/*    >*/}
                    {/*    </Button>*/}
                    {/*</View>*/}
                </View>
                <View style={style.conBtm}>
                    <Text style={{color: "#A9AAAA", fontFamily: "Cochin", fontSize: 12,}}>
                        仅供学习参考使用@toyong.cn
                    </Text>
                </View>
                {/*<View style={style.btn_text}>*/}
                {/*    */}
                {/*</View>*/}
                {/*<View style={{height: 30}}>*/}

                {/*</View>*/}
            </View>
        );
    }
}

const dispatchToProps = (dispatch) => {
    return {
        loginChange(user) {
            const action = LoginAction(user)
            dispatch(action);
        }
    }
}
const style = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        height:height,
        flexDirection: "column",
        alignItems: "center",
        //justifyContent: "center",
        backgroundColor: "#FEFEFF"
    },
    conTop:{
        alignItems: "center",
        justifyContent: "center",
    },

    top: {
        marginTop: 50,
        //backgroundColor:'red',
        alignItems: "center",
        //justifyContent: "center",
    },
    center: {
        marginTop: 10,
        //height:50,
        //backgroundColor:'orange',
        alignItems: "center",
        justifyContent: "center",
    },
    cen_container: {
        marginTop: 5,
        marginBottom: 5,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#F1F3F7",
        width: width - 40 - 40,
        height: 70,
        borderRadius: 50
    },
    btn: {
        marginTop: 30,
    },
    button: {
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#409EFF",
        width: 120,
        height: 40,
        borderRadius: 50,
    },
    conBtm:{
        height:height-380,
        flexDirection: "row",
        alignItems: "flex-end",
    },

    // btn_text: {
    //     flexDirection: "row",
    //     alignItems: "flex-end",
    // }
})

export default connect(null, dispatchToProps)(Login);
